<script setup></script>

<template>
  <div>
    <h1>Reg</h1>
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary" @click="btn1">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <!-- <ol>
      <li v-for="(artical, index) in list" :key="'artical' + index">
        {{ artical.title }}
      </li>
    </ol> -->
    <img
      :src="artical.picurl"
      alt=""
      :title="artical.title"
      v-for="(artical, index) in list"
      :key="'artical' + index"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'

const list = ref([])

const btn1 = () => {
  const path = 'https://apis.tianapi.com/wxnew/index?key=c65cff44e82fc3b1d27622e80e0a1b6c&num=10'
  const request = new XMLHttpRequest() //  0
  request.open('get', path) // 1
  request.onreadystatechange = function () {
    console.log(request.readyState) // 0,1,2,3,4
    if (request.readyState === 4 && request.status === 200) {
      // 获得响应的body部分
      const str = request.responseText
      const obj = JSON.parse(str)
      if (obj.code === 200) {
        list.value = obj.result.list
      }
    } else {
      console.log('error ')
    }
  }
  request.send() // 发送请求 ,2
  // 二次发送数据
  // get ， head ，为null
  // post ，put， delete，  必填填写被发送数据

  console.log('btn1')
}
</script>
